<template>
  <div class="addgood">
    <div class="accountSetting_title">选择商品分类</div>
    <!-- 导航进度条 -->
    <el-steps
      process-status="success"
      align-center
      :active="active"
      finish-status="success"
      :space="400"
    >
      <el-step title="选择商品分类"></el-step>
      <el-step title="填写商品信息"></el-step>
      <el-step title="填写商品属性"></el-step>
    </el-steps>
    <!-- 第一季分类 -->
    <div class="goodsfenlei">
      <!-- 第一级分类 -->
      <div v-if="fenlei1">
        <!-- 标题选着分类 -->
        <div class="xuanzhefenlei">
          <el-tag type="info" effect="dark">
            <i class="el-icon-s-grid"></i>
            <span class="fenleiSpan">选择分类</span>
          </el-tag>
        </div>
        <div class="CascaderPanel">
          <el-cascader-panel v-model="valname" :options="option" @change="goodChange"></el-cascader-panel>
        </div>
        <!-- 选中商品 -->
        <div class="xuanzheleibian">
          你当前选着的商品类别是：
          <span class="xuanzheleibianSpan">{{valname}}</span>
        </div>
        <div class="xiayibuButtton">
          <el-button @click="hangleBtn" size="small" type="primary">下一步，填写商品信息</el-button>
        </div>
      </div>
      <!-- 第二级分类 -->
      <div v-if="fenlei2">
        <div class="goodShopFlex">
          <!-- 标题选着分类 -->
          <div class="xuanzhefenlei">
            <el-tag type="info" effect="dark">
              <i class="el-icon-s-grid"></i>
              <span class="fenleiSpan">基本信息</span>
            </el-tag>
            <el-tag type="info" effect="dark" style="display:block; margin-top:100px;">
              <i class="el-icon-s-grid"></i>
              <span class="fenleiSpan">库存规格</span>
            </el-tag>
          </div>
          <div style="margin-right:700px;">
            <div>
              <!-- <div>
                商品分类：{{shangpinfenleis}}
                <span
                  style="color:blue; cursor: pointer;"
                  @click="hangleBtnShang"
                >编辑</span>
              </div>-->
              <el-form ref="formdata" :model="formdata" label-width="130px">
                <el-form-item label="商品分类">
                  <span>{{shangpinfenleis}}</span>
                  <span
                    style="color:blue; cursor: pointer; margin-left:10px;"
                    @click="hangleBtnShang"
                  >编辑</span>
                </el-form-item>
                <el-form-item label="商品名称">
                  <el-input v-model="formdata.name"></el-input>
                </el-form-item>
                <el-form-item label="副标题">
                  <el-input v-model="formdata.title"></el-input>
                </el-form-item>
                <el-form-item label="商品品牌">
                  <el-select v-model="value" placeholder="请选择品牌">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="运费模板">
                  <el-select v-model="value" placeholder="请选择模板">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="商品货号">
                  <el-input v-model="formdata.huohao"></el-input>
                </el-form-item>
                <div>如果你不输入商品货号，系统将会自动生成一个唯一的货号</div>
              </el-form>
              <div>
                服务保证：
                <el-checkbox-group v-model="checkList">
                  <el-checkbox label="无忧退货"></el-checkbox>
                  <el-checkbox label="快速退款"></el-checkbox>
                  <el-checkbox label="免费包邮"></el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </div>
        </div>

        <div class="xiayibuButtton">
          <el-button size="small" @click="hangleBtnShang" type="primary">上一步，选择分类商品</el-button>
          <el-button size="small" @click="hangleBtnXia" type="primary">下一步，填写商品信息</el-button>
        </div>
      </div>
      <!-- 第三级分类 -->
      <div v-if="fenlei3">
        <div class="goodShopFlex">
          <!-- 标题选着分类 -->
          <div class="xuanzhefenlei">
            <el-tag type="info" effect="dark">
              <i class="el-icon-s-grid"></i>
              <span class="fenleiSpan">基本信息</span>
            </el-tag>
            <el-tag type="info" effect="dark" style="display:block; margin-top:100px;">
              <i class="el-icon-s-grid"></i>
              <span class="fenleiSpan">商品参数</span>
            </el-tag>
            <el-tag type="info" effect="dark" style="display:block; margin-top:100px;">
              <i class="el-icon-s-grid"></i>
              <span class="fenleiSpan">商品相册</span>
            </el-tag>
            <el-tag type="info" effect="dark" style="display:block; margin-top:100px;">
              <i class="el-icon-s-grid"></i>
              <span class="fenleiSpan">详情描述</span>
            </el-tag>
          </div>
          <div style="margin-right:700px;" class="fenlei3">
            <el-form :model="ruleForm1" ref="ruleForm1" label-width="100px">
              <el-form-item label="规格参数:">
                <el-input :value="fenlei3IptVal" disabled></el-input>
              </el-form-item>
              <el-form-item label="尺码:">
                <el-checkbox-group v-model="checkList1">
                  <el-checkbox label="M"></el-checkbox>
                  <el-checkbox label="X"></el-checkbox>
                  <el-checkbox label="XL"></el-checkbox>
                  <el-checkbox label="2XL"></el-checkbox>
                  <el-checkbox label="3XL"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="颜色:">
                <el-checkbox-group v-model="checkList2">
                  <el-checkbox label="黑色"></el-checkbox>
                  <span class="yansespan">删除</span>
                  <el-checkbox label="红色"></el-checkbox>
                  <span class="yansespan">删除</span>
                  <el-checkbox label="白色"></el-checkbox>
                  <span>删除</span>
                  <el-checkbox label="粉色"></el-checkbox>
                  <span class="yansespan">删除</span>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
            <!-- 图片上传 -->
            <div class="tupianshangchuan">
              <el-tab-pane label="商品图片" name="3">
                <!-- 图片上传功能 -->
                <el-upload
                  :action="addAction"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  list-type="picture"
                  :headers="headersAdd"
                  :on-success="handlSuccess"
                >
                  <el-button style="display:block;" size="small" type="primary">点击上传图片</el-button>
                </el-upload>
              </el-tab-pane>
            </div>
            <div>
              <quill-editor v-model="goods_introduce"></quill-editor>
            </div>
          </div>
        </div>
        <div class="xiayibuButtton">
          <el-button size="small" @click="hangleBtnShang1" type="primary">上一步，填写商品信息</el-button>
          <el-button size="small" @click="tijiaoshenhe" type="primary">提交审核</el-button>
        </div>
      </div>
    </div>
    <!-- 图片放大框 -->
    <el-dialog title="图片预览" :visible.sync="dialogVisibleImg" width="50%" class="previeimg">
      <img :src="previeImg" alt />
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      headersAdd: {
        Authorization: window.sessionStorage.getItem('token') || ''
      },
      addAction: 'https://jsonplaceholder.typicode.com/posts/',
      active: 0,
      option: [],
      valname: null,
      fenlei1: true,
      fenlei2: false,
      fenlei3: false,
      shangpinfenleis: JSON.parse(window.localStorage.getItem('shangpin')),
      formdata: {
        name: '',
        title: '',
        huohao: ''
      },
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      value: '',
      checkList: ['无忧退货', '快速退款', '免费包邮'],
      ruleForm1: {
        name: ''
      },
      fenlei3IptVal: '',
      checkList1: ['M', 'X'],
      checkList2: [],
      dialogVisibleImg: false,
      previeImg: '',
      goods_introduce: ''
    }
  },
  created() {
    this.addGoodOne()
  },
  methods: {
    tijiaoshenhe() {
      this.$router.history.push('/goods-list')
    },
    hangleBtnShang1() {
      this.active = 1
      this.fenlei2 = true
      this.fenlei3 = false
    },
    // 上传成功时触发的钩子函数
    handlSuccess(response) {
      const successImg = { pic: response.data.tmp_path }
      this.addForm.pics.push(successImg)
    },
    // 移除图片触发的函数
    handleRemove(file) {
      // console.log(file)
      const removImg = file.response.data.tmp_path
      const removIndex = this.addForm.pics.findIndex(
        val => val.pic === removImg
      )
      this.addForm.pics.splice(removIndex, 1)
      // console.log(this.addForm)
    },
    // 图片预览放大
    handlePreview(file) {
      console.log(file)
      this.previeImg = file.response.data.url
      this.dialogVisibleImg = true
    },
    hangleBtnXia() {
      console.log(1111)
      this.fenlei2 = false
      this.fenlei3 = true
      this.active = 2
      const shangpinfenlei = JSON.parse(window.localStorage.getItem('shangpin'))
        .split(' ')
        .reverse()
      console.log(shangpinfenlei, 'shangpinfenlei')
      this.fenlei3IptVal = shangpinfenlei[0]
      console.log(this.fenlei3IptVal)
      // console.log(shangpinfenlei, 222222222)
    },
    hangleBtnShang() {
      this.active = 0
      this.fenlei1 = true
      this.fenlei2 = false
    },
    hangleBtn() {
      if (!this.valname) {
        this.$Toast('请选择分类', 'info')
        return
      }
      this.shangpinfenleis = JSON.parse(window.localStorage.getItem('shangpin'))
      this.active = 1
      this.fenlei1 = false
      this.fenlei2 = true
    },
    goodChange(val) {
      this.valname = val.join(' ')
      window.localStorage.setItem('shangpin', JSON.stringify(val.join(' ')))
    },
    async addGoodOne() {
      const { data: res } = await this.$http.get('/addgoods')
      //   console.log(option, 1111111)
      this.option = res.option
      console.log(this.option)
    }
  }
}
</script>
<style lang="less" scoped>
.addgood {
  .xiayibuButtton {
    margin: 20px 0 0 400px;
  }
  .accountSetting_title {
    background-color: #f3f3f3;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    margin-top: 15px;
  }
  .el-steps {
    margin-left: 260px;
  }
  .goodsfenlei {
    padding: 50px 150px;
    .goodShopFlex {
      display: flex;
      justify-content: space-between;
      .fenlei3 {
        color: lightblue !important;
        cursor: pointer;
      }
    }
    .xuanzheleibian {
      margin-left: 130px;
      margin-top: 30px;
      .xuanzheleibianSpan {
        color: lightblue;
      }
    }
    .CascaderPanel {
      margin-left: 200px;
      margin-top: 60px;
    }
    .xuanzhefenlei {
      .fenleiSpan {
        color: #fff;
        font-size: 13px;
        margin-left: 2px;
        margin-bottom: 2px;
      }

      .el-tag {
        padding: 0 30px;
      }
      .el-icon-s-grid {
        font-size: 16px;
        color: #fff;
        margin-top: 7px;
      }
    }
  }
  .previeimg {
    width: 100%;
  }
  .el-tab-pane {
    display: block !important;
  }
  .yansespan {
    color: lightblue;
  }
  .quill-editor {
    margin: 20px 0 0 20px;
    width: 700px;
  }
  .tupianshangchuan {
    .el-tab-pane {
      padding: 0 30px;
    }
    .el-button {
      margin-left: 80px;
    }
  }
}
</style>
